<template>
	<div class="">
		<div class="myMapbox">
			<map id="myMap" :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px;'" :longitude="longitude"
				:latitude="latitude" scale="10" :markers="markers" @markertap="markertap" :circles="circles"
				@regionchange="regionchangetab">
				<!-- 固定定位标 -->
				<cover-image :style="'left: '+ windowWidth/2 +'px; top: '+ windowHeight/2 +'px;'"
					class="controls-play-img bounce-animation"
					src="@/static/image/system/currentposi.png"></cover-image>
				<!-- 九宫格 -->
				<div class="jiugongge flexleft flex_wrap" v-if="nineshow">
					<div class="itembox flexcenter" :class="{
						'topborder':index<=2,
						'leftborder':index%3==0 || index==0,
						'topleftradius':index==0,
						'toprightradius':index==2,
						'bomleftradius':index==9,
						'bomrightradius':index==11,
					}" v-for="(item,index) in tabslist" :key="item.id" @click="enterDetail(item)">{{item.name}}
					</div>
				</div>
			</map>
		</div>

	</div>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				windowHeight: 0,
				windowWidth: 0,
				latitude: "",
				longitude: "",
				Allmarker: [],
				markers: [],
				nineshow: false,
				tabslist: [],
				currentuid: "",
				circles: [{ //在地图上显示圆
					latitude: 34.74334,
					longitude: 113.424965,
					fillColor: "#e6060a6A", //填充颜色
					color: "#e6060a6A", //描边的颜色
					radius: 300, //半径
					strokeWidth: 2 //描边的宽度
				}]
			}
		},
		onLoad() {
			let system = uni.getSystemInfoSync()
			this.windowHeight = system.windowHeight
			this.windowWidth = system.windowWidth
			this.getloaction()
			this.getclass()
			let token = uni.getStorageSync("token")
			// 点位状态 0-未申请 1-待审核 2-审核通过 3-审核拒绝
			let mapStatus = uni.getStorageSync("mapStatus")
			console.log("数据信息", token, mapStatus);
			if (token && (mapStatus == 1 || mapStatus == 3)) {
				this.getInfo()
			}
		},
		methods: {
			getInfo() {
				httpRequest.request('/api/v1/userAddress/getInfo', 'GET', {}).then(res => {
					console.log("接口请求", res);
					if (res.code == 200) {
						if (res.data.checkStatus == 1) {
							httpRequest.toast("您的点位信息正在审核中！")
							return false
						}
						if (res.data.checkStatus == 2) {
							httpRequest.toast("您的点位信息审核成功，请前往登录！")
							return false
						}
						if (res.data.checkStatus == 3) {
							httpRequest.toast("您的点位信息审核失败，请重新登录后查看！")
							return false
						}
					}
				})
			},
			getclass() {
				httpRequest.request('/api/v1/communityCategory/list', 'GET', {}).then(res => {
					this.tabslist = res.data
				})
			},
			enterDetail(item) {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login"
					})
					return false
				}
				let url = "/pages/index/personHome?uid=" + this.currentuid + "&tabsid=" + item.id
				uni.navigateTo({
					url
				})
			},
			// 发生变化定位
			regionchangetab(e) {
				let that = this;
				setTimeout(() => {
					uni.createMapContext("myMap", this).getCenterLocation({
						type: 'gcj02',
						success: (res) => {
							console.log("当前地图中心的经纬度", res)
							that.latitude = res.latitude;
							that.longitude = res.longitude;
							//其他逻辑
							that.getMarker()
						},
						fail: (err) => {}
					})
				}, 400);
			},
			getloaction() {
				let that = this
				uni.showLoading({
					mask: true,
					title:"请稍后"
				})
				uni.getLocation({
					type: 'wgs64',
					success: function(res) {
						uni.hideLoading()
						that.latitude = res.latitude;
						that.longitude = res.longitude;
						that.getMarker()
					},
					fail: function(info) {
						uni.hideLoading()
					}
				});
			},
			getMarker() {
				httpRequest.request('/api/v1/userAddress/list', 'GET', {
					lng: this.longitude,
					lat: this.latitude,
					distance: 50000
				}).then(res => {
					console.log("点位信息", res);
					let marker = []
					res.data.forEach(item => {
						let obj = {
							"id": item.id,
							"latitude": item.latitude,
							"longitude": item.longitude,
							"width": 32,
							"height": 32,
							"iconPath": item.avatar,
							"callout": {}
						}
						// 如果该用户需要头像提示了添加callout气泡信息
						if (item.dynamicsStatus) {
							obj.callout = {
								"content": "16", //内容没有用，主要用来撑盒子
								"color": "#ffa126",
								"fontSize": 20,
								"borderRadius": 50,
								"bgColor": "#ffa126",
								"display": "ALWAYS",
								"padding": 3,
								"anchorY": 5
							}
						}
						marker.push(obj)
					})
					this.markers = JSON.parse(JSON.stringify(marker))
					this.Allmarker = res.data
				})
			},
			markertap(e) {
				this.nineshow = true
				// 拿到当前marker点的用户id
				let arr = this.Allmarker
				let currentindex = 0
				arr.forEach((item, index) => {
					if (item.id == e.detail.markerId) {
						currentindex = index
					}
				})
				this.currentuid = arr[currentindex].uid
			}
		}
	}
</script>

<style>
	#myMap {
		position: relative;
	}

	.bounce-animation {
		animation: bounce 0.6s alternate;
		/* 动画名称、持续时间、重复次数和交替方向 */
	}

	.controls-play-img {
		height: 30px;
		margin-left: -15px;
		margin-top: -15px;
		width: 30px;
		z-index: 9999;
		position: absolute;
		transform: translate(50%, 50%);
	}

	.jiugongge {
		position: fixed;
		top: 30px;
		right: 0;
		width: 160px;
	}

	.itembox {
		width: 50px;
		height: 50px;
		border-bottom: 1px solid #3B99FF;
		border-right: 1px solid #3B99FF;
		box-sizing: border-box;
		background-color: rgba(59, 153, 255, .1);
	}

	.topborder {
		border-top: 1px solid #3B99FF;
	}

	.leftborder {
		border-left: 1px solid #3B99FF;
	}

	.topleftradius {
		border-radius: 5px 0 0 0;
	}

	.toprightradius {
		border-radius: 0 5px 0 0;
	}

	.bomleftradius {
		border-radius: 0 0 0 5px;
	}

	.bomrightradius {
		border-radius: 0 0 5px 0;
	}
</style>
<style>
	.flexleft {
		display: flex;
		align-items: center;
		flex-direction: row;
	}

	.flexcenter {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
	}

	.flex_wrap {
		flex-wrap: wrap;
	}
</style>